<!--
 * @Description: 
 * @Date: 2023-02-23 18:07:51
 * @LastEditors: czp
 * @LastEditTime: 2023-04-21 16:22:57
-->
<template>
	<div class="zhi-bo">
		<div class="title">荆竹之春</div>
		<div class="container-box">
			<div class="video-box">
				<video controls ref="videoRef" class="video" :src="preVideo.src"></video>
				<div class="zhi-bo-text">直播中</div>
				<div class="guan-kan-ren">观看人数：1256</div>
			</div>
			<PreviewVideo ref="PVVideoRef" :video="preVideo" />
		</div>

		<!-- 其他视频 -->
		<div class="bottom">
			<div class="list">
				<div class="list-item" v-for="(item, index) in list" :key="index">
					<div class="video-box">
						<el-image class="in" :src="item.img + '?imageMogr2/thumbnail/375x'" fit="cover" />
						<IEpVideoPlay color="#fff" />
					</div>
					<span>{{ item.label }}</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="ZhiBo">
import PreviewVideo from "@/components/PreviewVideo/index.vue";
import { PVideo } from "@/components/interface";
import { useBaseStore } from "@/store/base";

const { cosPrefix } = useBaseStore();
const preVideo = ref<PVideo>({ title: "", src: "https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangmeng/yunzhibo/V1.mp4" });
const PVVideoRef = ref<InstanceType<typeof PreviewVideo>>();

provide("playVideo", (res: PVideo) => {
	preVideo.value = res;
	PVVideoRef.value.play();
});
const list = [
	{ label: "归原小镇", img: cosPrefix + "three-level/xiangmeng/yunzhibo/1.png", video: cosPrefix + "/video/xiangye/V1.mp4" },
	{ label: "悬崖餐厅", img: cosPrefix + "three-level/xiangmeng/yunzhibo/2.png", video: cosPrefix + "/header/v1.mp4" },
	{ label: "农作农事", img: cosPrefix + "three-level/xiangmeng/yunzhibo/3.jpg", video: cosPrefix + "/video/xiangye/V3.mp4" },
	{ label: "企业风采", img: cosPrefix + "three-level/xiangmeng/yunzhibo/4.jpg", video: cosPrefix + "/video/xiangye/V2.mp4" }
] as any[];
</script>
<style lang="scss" scoped>
.zhi-bo {
	padding: 40px 320px;
	padding-bottom: 0;
	text-align: center;
	.title {
		margin: 20px 0;
		font-size: 28px;
		color: #333333;
		text-align: left;
	}
	.container-box {
		display: flex;
		.video-box {
			position: relative;
			width: calc(300px + 980px);
			height: 640px;
			.zhi-bo-text {
				position: absolute;
				top: 20px;
				left: 20px;
				padding: 6px 15px;
				font-family: Roboto;
				font-size: 18px;
				color: #ffffff;
				background-color: #8a1313;
				border-radius: 2px;
			}
			.guan-kan-ren {
				position: absolute;
				top: 30px;
				right: 20px;
				font-family: Roboto;
				color: #ffffff;
			}
		}
		.dialog {
			width: px;
			height: 640px;
			font-family: Roboto;
			background-color: #333333;
			p {
				padding: 10px 0;
				margin: 0;
				color: #ffffff;
				border-bottom: 1px solid #000000;
			}
		}
	}
	.bottom {
		margin: 60px 0;
		.list {
			display: flex;
			justify-content: space-between;
			.list-item {
				display: flex;
				flex-direction: column;
				align-items: left;
				color: #ffffff;
				&:last-child {
					margin-right: 0;
				}
				.el-image {
					width: 305px;
					height: 200px;
				}
				> span {
					margin-top: 10px;
					font-size: 16px;
					color: #101010;
					text-align: left;
				}
			}
		}
	}
}

@media all and (max-width: 750px) {
	.zhi-bo {
		padding: 16px;
		.container-box {
			.video-box {
				height: auto;
			}
		}
		.bottom {
			.list {
				flex-wrap: wrap;
				.list-item {
					width: 47.5%;
					margin-right: 5%;
					margin-bottom: 10px;
					&:nth-child(2n) {
						margin-right: 0;
					}
					.el-image {
						width: 100%;
					}
				}
			}
		}
	}
}
</style>
